
function Index() {
  return (
    // 9.完成热榜数据的列表渲染
    <div>
        {/* 7.数据自行模拟Mock */}
        <div>
        {/* 10.热榜列表前三条需要标记 1 2 3 不同颜色 */}
        <button style={{color:'red',border:'1px',borderRadius:'20px',backgroundColor:'pink'}}> 辟谣</button>
         辟谣专区
      <hr style={{color:'#f2f2f2'}}/>
        </div>
 <div>

    <h3>
     <span style={{color:'orange',marginLeft:'20px',marginRight:'20px'}}>1</span> 
       辽宁朝阳老年暴走团逼停救护车，消防车出勤，具体怎么回事？他们应该避让吗？</h3>
    <p>据网友反应，7月17日，辽宁朝阳一老年徒步团队准备...</p>
    <hr style={{color:'#f2f2f2'}}/>
 </div>
 <div>

    <h3>
     <span style={{color:'orange',marginLeft:'20px',marginRight:'20px'}}>2</span> 
       上海未来能否取代东京，成为亚洲第一大城市？</h3>
    
    <hr style={{color:'#f2f2f2'}}/>
 </div>
 <div>

<h3>
 <span style={{color:'orange',marginLeft:'20px',marginRight:'20px'}}>3</span> 
   市场监管总局约谈饿了么，美团，京东三家平台企业，要求外卖平台理性竞争</h3>
   <p>118日，市场监管总局约谈饿了么，美团，京东三家平台...</p>
<hr style={{color:'#f2f2f2'}}/>
</div>
<div>

<h3>
 <span style={{color:'gray',marginLeft:'20px',marginRight:'20px'}}>4</span> 
  十年磨一剑，姜文新电影《你行！你上》票房预测，你觉得有多少？</h3>
<p>没有赶5.1，没有等国庆，专门在暑假。大门人的记忆还停留...</p>
<hr style={{color:'#f2f2f2'}}/>
</div>
<div>

<h3>
 <span style={{color:'gray',marginLeft:'20px',marginRight:'20px'}}>5</span> 
  为什么优秀的孩子更容易抑郁</h3>


</div>
    </div>
  )
}

export default Index
